<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/homepage.css">
    <link rel="stylesheet" href="../css/resrt.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <title>Document</title>
</head>

<body>
    <!-- 引入头部 -->
    <div class="header"></div>


    <div class="banner">
        <div class="z_banner w">
            <!-- 导航栏板块 -->
            <div class="banner_list">
                <ul class="J_categoryList">
                    <li><a href="#">手机</a> <span class="iconfont icon-xiangyou2"></span>
                        <div class="clearfix">
                            <ul class="clearfix_ul1">
                                <!-- <li>
                                    <a href="#">
                                        <img src="../img/01.webp" alt="">
                                        <span>Xiaomi Civi 1S</span>
                                    </a>
                                </li> -->
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">电视</a> <span class="iconfont icon-xiangyou2"></span>
                        <div class="clearfix">
                            <ul class="clearfix_ul2">
                                <!-- <li>
                                    <a href="#">
                                        <img src="../img/01.webp" alt="">
                                        <span>Xiaomi Civi 1S</span>
                                    </a>
                                </li> -->
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">笔记本 平板</a> <span class="iconfont icon-xiangyou2"></span>
                        <div class="clearfix">
                            <ul class="clearfix_ul3">
                                <!-- <li>
                                    <a href="#">
                                        <img src="../img/01.webp" alt="">
                                        <span>Xiaomi Civi 1S</span>
                                    </a>
                                </li> -->
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">家电</a> <span class="iconfont icon-xiangyou2"></span>
                        <div class="clearfix">
                            <ul class="clearfix_ul4">
                                <!-- <li>
                                    <a href="#">
                                        <img src="../img/01.webp" alt="">
                                        <span>Xiaomi Civi 1S</span>
                                    </a>
                                </li> -->
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">出行 穿戴</a> <span class="iconfont icon-xiangyou2"></span>
                        <div class="clearfix">
                            <ul class="clearfix_ul5">
                                <!-- <li>
                                    <a href="#">
                                        <img src="../img/01.webp" alt="">
                                        <span>Xiaomi Civi 1S</span>
                                    </a>
                                </li> -->
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">智能 路由器</a> <span class="iconfont icon-xiangyou2"></span>
                        <div class="clearfix">
                            <ul class="clearfix_ul6">
                                <!-- <li>
                                    <a href="#">
                                        <img src="../img/01.webp" alt="">
                                        <span>Xiaomi Civi 1S</span>
                                    </a>
                                </li> -->
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">电源 配件</a> <span class="iconfont icon-xiangyou2"></span>
                        <div class="clearfix">
                            <ul class="clearfix_ul7">
                                <!-- <li>
                                    <a href="#">
                                        <img src="../img/01.webp" alt="">
                                        <span>Xiaomi Civi 1S</span>
                                    </a>
                                </li> -->
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">健康 儿童</a> <span class="iconfont icon-xiangyou2"></span>
                        <div class="clearfix">
                            <ul class="clearfix_ul8">
                                <!-- <li>
                                    <a href="#">
                                        <img src="../img/01.webp" alt="">
                                        <span>Xiaomi Civi 1S</span>
                                    </a>
                                </li> -->
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">耳机 箱包</a> <span class="iconfont icon-xiangyou2"></span>
                        <div class="clearfix">
                            <ul class="clearfix_ul9">
                                <!-- <li>
                                    <a href="#">
                                        <img src="../img/01.webp" alt="">
                                        <span>Xiaomi Civi 1S</span>
                                    </a>
                                </li> -->
                            </ul>
                        </div>
                    </li>
                    <li>
                        <a href="#">生活 箱包</a>
                        <span class="iconfont icon-xiangyou2"></span>
                        <div class="clearfix">
                            <ul class="clearfix_ul10">
                                <!-- <li>
                                    <a href="#">
                                        <img src="../img/01.webp" alt="">
                                        <span>Xiaomi Civi 1S</span>
                                    </a>
                                </li> -->
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 轮播图板块 -->
            <div class="banner_right">
                <ul class="banner_move">
                    <!-- <li>
                        <a href="#">
                            <img src="../img/lunbo0.webp" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../img/lunbo1.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../img/lunbo2.webp" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../img/lunbo3.webp" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="../img/lunbo0.webp" alt="">
                        </a>
                    </li> -->
                </ul>

                <ol class="all">
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>

                <div id="arr">
                    <span id="left" class="left">&lt;</span>
                    <span id="right" class="right">&gt;</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 轮播图下面的板块 -->
    <div class="home_hero">
        <div class="home_hero_sub w">
            <ul class="home_channel_list">
                <li>
                    <a href="#" class="channel_list_img" id="img_bottom">
                        <img src="../img/shi1.png" alt="">
                        <span>保障服务</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="channel_list_img" id="img_bottom">
                        <img src="../img/shi2.png" alt="">
                        <span>企业团购</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="channel_list_img" id="img_bottom" id="wu">
                        <img src="../img/shi3.png" alt="">
                        <span>F码通道</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="channel_list_img">
                        <img src="../img/shi4.png" alt="">
                        <span>米粉卡</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="channel_list_img">
                        <img src="../img/shi5.png" alt="">
                        <span>以旧换新</span>
                    </a>
                </li>
                <li>
                    <a href="#" class="channel_list_img" id="wu">
                        <img src="../img/shi7.png" alt="">
                        <span>话费充值</span>
                    </a>
                </li>
            </ul>
            <div class="adv_img"><img src="../img/shi2.jpg" alt=""></div>
            <div class="adv_img"><img src="../img/shi3.jpg" alt=""></div>
            <div class="adv_img"><img src="../img/shi4.jpg" alt=""></div>
        </div>
    </div>


    <!-- 首页列表 -->
    <div class="home_page">
        <div class="home_main w">
            <div class="home_banner_box">
                <img src="../img/home_banner_box.jpg" alt="">
            </div>
            <!-- 手机 -->
            <div class="home_brick_box">
                <div class="box_hd">
                    <h2>手机</h2>
                    <div class="more_hd">
                        <a href="#">

                            更多
                            <span class="iconfont icon-xiangyou1"></span>
                        </a>
                    </div>
                </div>

                <div class="box_bd">
                    <div class="box_hd_left">
                        <img src="../img/box_hd_left.webp" alt="">
                    </div>
                    <div class="box_hd_right">
                        <ul class="brick_list">
                            <li>
                                <a href="#">
                                    <div class="figure_img">
                                        <img src="../img/01.webp" alt="">
                                    </div>
                                    <h3> Xiaomi Civi 1S </h3>
                                    <p class="desc_word">原生美肌人像｜奇迹阳光动人新色｜骁龙778G Plus</p>
                                    <p class="price_list">
                                        <span>649元起</span>
                                        <del>999元</del>
                                    </p>
                                </a>
                            </li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>

            </div>

            <!-- 智能穿戴 -->
            <div class="home_brick_box2 w">
                <div class="box_hd2">
                    <h2>智能穿戴</h2>
                    <div class="more_hd2">
                        <ul class="tab_list2" id="tab_list">
                            <li>热门</li>
                            <li>穿戴</li>
                        </ul>
                    </div>
                </div>

                <div class="box_bd2">
                    <div class="box_hd_left2">
                        <img src="../img/box_hd_left2.jpg" alt="">
                    </div>
                    <div class="box_hd_right2">
                        <ul class="brick_list2">
                            <li>
                                <a href="#">
                                    <div class="figure_img2">
                                        <img src="../img/b8259e8fb355acf168c66f75d375c6af.jpg" alt="">
                                    </div>
                                    <h3> Xiaomi Watch S1</h3>
                                    <p class="desc_word2">腕事具备</p>
                                    <p class="price_list2">
                                        <span>1099元起</span>
                                        <del>999元</del>
                                    </p>
                                </a>
                            </li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 笔记本 | 平板 -->
            <div class="home_brick_box3 w">
                <div class="box_hd3">
                    <h2>笔记本 | 平板</h2>
                    <div class="more_hd3">
                        <ul class="tab_list3" id="tab_list">
                            <li>热门</li>
                        </ul>
                    </div>
                </div>

                <div class="box_bd3">
                    <div class="box_hd_left3">
                        <img src="../img/box_hd_left2.jpg" alt="">
                    </div>
                    <div class="box_hd_right3">
                        <ul class="brick_list3">
                            <li>
                                <a href="#">
                                    <div class="figure_img3">
                                        <img src="../img/0f8abb2bc3947c4679e3f1b2aafc28c0.jpg" alt="">
                                    </div>
                                    <h3> Redmi Book Pro 15 2022 </h3>
                                    <p class="desc_word3">全新12代英特尔处理器</p>
                                    <p class="price_list3">
                                        <span>5599元起</span>
                                        <del>999元</del>
                                    </p>
                                </a>
                            </li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>


            <!-- 家电 -->
            <div class="home_brick_box4 w">
                <div class="box_hd4">
                    <h2>家电</h2>
                    <div class="more_hd4">
                        <ul class="tab_list4" id="tab_list">
                            <li>热门</li>
                            <li>电视音影</li>
                        </ul>
                    </div>
                </div>

                <div class="box_bd4">
                    <ul class="box_hd_left4">
                        <li><img src="../img/3d47879ec183e25a36e67e0219636e60.jpg" alt=""></li>
                        <li><img src="../img/229bbaccda43f32f464c0a810b800106.jpg" alt=""></li>
                    </ul>
                    <div class="box_hd_right4">
                        <ul class="brick_list4">
                            <li>
                                <a href="#">
                                    <div class="figure_img4">
                                        <img src="../img/c7c15101f2c8a652a4a0d069501d1e53.jpg" alt="">
                                    </div>
                                    <h3> 小米电视6 65” OLED</h3>
                                    <p class="desc_word4">OLED自发光屏 | 百万级对比度 | 4.6mm超薄全面屏</p>
                                    <p class="price_list4">
                                        <span>6699元起</span>
                                        <del>6699元</del>
                                    </p>
                                </a>
                            </li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>


            <!-- 生活电器 -->
            <div class="home_brick_box5 w">
                <div class="box_hd5">
                    <h2>生活电器</h2>
                    <div class="more_hd5">
                        <ul class="tab_list5" id="tab_list">
                            <li>扫地机</li>
                            <li>空净</li>
                            <li>清洁</li>
                            <li>风扇</li>
                        </ul>
                    </div>
                </div>

                <div class="box_bd5">
                    <ul class="box_hd_left5">
                        <li><img src="../img/37973c4bedc27bae38e1b1758ed4b318.webp" alt=""></li>
                        <li><img src="../img/d51103fe64d90aca747a6d753beae293.webp" alt=""></li>
                    </ul>
                    <div class="box_hd_right5">
                        <ul class="brick_list5">
                            <li>
                                <a href="#">
                                    <div class="figure_img5">
                                        <img src="../img/c7c15101f2c8a652a4a0d069501d1e53.jpg" alt="">
                                    </div>
                                    <h3> 米家全能扫拖机器人</h3>
                                    <p class="desc_word5">免洗集尘全自动，一机解放双手</p>
                                    <p class="price_list5">
                                        <span>4599元起</span>
                                        <del>4599元</del>
                                    </p>
                                </a>
                            </li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 游戏手柄，精英版 -->
            <div class="home_banner_box1">
                <img src="../img/8479bfe7cf1e4531c4d8d26c7dd89161.webp" alt="">
            </div>

            <!-- 厨房电器 -->
            <div class="home_brick_box6 w">
                <div class="box_hd6">
                    <h2>厨房电器</h2>
                    <div class="more_hd6">
                        <ul class="tab_list6" id="tab_list">
                            <li>扫地机</li>
                            <li>烟灶</li>
                            <li>电饭煲</li>
                            <li>微蒸烤</li>
                        </ul>
                    </div>
                </div>

                <div class="box_bd6">
                    <ul class="box_hd_left6">
                        <li><img src="../img/d0a92bc19df74c4da59563206321320a.webp" alt=""></li>
                        <li><img src="../img/00c61477413eb05a67b1ec032a148121.webp" alt=""></li>
                    </ul>
                    <div class="box_hd_right6">
                        <ul class="brick_list6">
                            <li>
                                <a href="#">
                                    <div class="figure_img6">
                                        <img src="../img/1889916871e84f151975bb83014ea61f.webp" alt="">
                                    </div>
                                    <h3> 小米净水器1200G</h3>
                                    <p class="desc_word6">3.2L/min大流量，鲜活首杯水</p>
                                    <p class="price_list6">
                                        <span>3299元起</span>
                                        <del>3499元</del>
                                    </p>
                                </a>
                            </li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>


            <!-- 智能家居 -->
            <div class="home_brick_box7 w">
                <div class="box_hd7">
                    <h2>智能家居</h2>
                    <div class="more_hd7">
                        <ul class="tab_list7" id="tab_list">
                            <li>小爱音箱</li>
                            <li>门锁</li>
                            <li>路由器</li>
                            <li>智能设备</li>
                        </ul>
                    </div>
                </div>

                <div class="box_bd7">
                    <ul class="box_hd_left7">
                        <li><img src="../img/ec383d223d9f38f442268df684c526f6.webp" alt=""></li>
                        <li><img src="../img/bb9761c5b49e21b4d5aa03e7ddaf1a09.webp" alt=""></li>
                    </ul>
                    <div class="box_hd_right7">
                        <ul class="brick_list7">
                            <li>
                                <a href="#">
                                    <div class="figure_img7">
                                        <img src="../img/202204191820_88e1f0fded3b4f05c5bdecf433a868cf.webp" alt="">
                                    </div>
                                    <h3>
                                        Xiaomi智能家庭屏 10
                                    </h3>
                                    <p class="desc_word7"> Home｜10.1" 高清大屏｜115°超广角摄像头｜儿童模式｜家庭 KTV｜小爱同学</p>
                                    <p class="price_list7">
                                        <span>3999元</span>
                                        <del></del>
                                    </p>
                                </a>
                            </li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 运动出行 -->
            <div class="home_brick_box8 w">
                <div class="box_hd8">
                    <h2>运动出行</h2>
                    <div class="more_hd8">
                        <ul class="tab_list8" id="tab_list">
                            <li>
                                平衡车/滑板车
                            </li>
                            <li>运动健身</li>
                            <li>箱包配饰</li>
                            <li>出行工具</li>
                        </ul>
                    </div>
                </div>

                <div class="box_bd8">
                    <ul class="box_hd_left8">
                        <li><img src="../img/84fef78042e4056ea589474196780d4e.webp" alt=""></li>
                        <li><img src="../img/ecce1c0d981037e58cfa281a06122249.webp" alt=""></li>
                    </ul>
                    <div class="box_hd_right8">
                        <ul class="brick_list8">
                            <li>
                                <a href="#">
                                    <div class="figure_img8">
                                        <img src="../img/T1r_x_BgLT1RXrhCrK.jpg" alt="">
                                    </div>
                                    <h3> 九号平衡车</h3>
                                    <p class="desc_word8"> 年轻人的酷玩具</p>
                                    <p class="price_list8">
                                        <span>2199元</span>
                                        <del></del>
                                    </p>
                                </a>
                            </li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>


            <!-- 小米巨型 -->
            <div class="home_banner_box2">
                <img src="../img/88e35cffc82cd98cd53172460067af17.webp" alt="">
            </div>

            <!-- 日用百货 -->
            <div class="home_brick_box9 w">
                <div class="box_hd9">
                    <h2>日用百货</h2>
                    <div class="more_hd9">
                        <ul class="tab_list9" id="tab_list">
                            <li>
                                个护健康
                            </li>
                            <li>电源/线材</li>
                            <li>儿童用品</li>
                            <li>居家床品</li>
                        </ul>
                    </div>
                </div>

                <div class="box_bd9">
                    <ul class="box_hd_left9">
                        <li><img src="../img/c5769bd53177a9301113f799fdc8511d.webp" alt=""></li>
                        <li><img src="../img/65950f83f429f2a05125bea297d8df6b.webp" alt=""></li>
                    </ul>
                    <div class="box_hd_right9">
                        <ul class="brick_list9">
                            <li>
                                <a href="#">
                                    <div class="figure_img9">
                                        <img src="../img/e2ad7080408a1434b90f824f50293b89.webp" alt="">
                                    </div>
                                    <h3>
                                        米家声波电动牙刷T700
                                    </h3>
                                    <p class="desc_word9"> 米家声波电动牙刷T700</p>
                                    <p class="price_list9">
                                        <span>299元</span>
                                        <del></del>
                                    </p>
                                </a>
                            </li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                </div>
            </div>


            <!-- 视频 -->
            <div class="home_brick_box10 w">
                <div class="box_hd10">
                    <h2>视频</h2>
                    <div class="more_hd10">
                        <a href="#">

                            更多
                            <span class="iconfont icon-xiangyou1"></span>
                        </a>
                    </div>
                </div>

                <div class="box_bd10">
                    <ul class="video_list">
                        <li>
                            <div class="figure_img10">
                                <img src="../img/e74c4ff741bcdfc5b28a48a43e4edc6d.webp" alt="">
                            </div>
                            <h3>2021年春季新品发布会第一场</h3>
                            <p></p>
                        </li>
                        <li>
                            <div class="figure_img10">
                                <img src="../img/101b19aca4bb489bcef0f503e44ec866.webp" alt="">
                            </div>
                            <h3>Redmi 10X系列发布会</h3>
                            <p>Redmi 10X系列发布会</p>
                        </li>
                        <li>
                            <div class="figure_img10">
                                <img src="../img/96563e75833ba4563bd469dd28203b09.webp" alt="">
                            </div>
                            <h3>小米10 青春版 发布会</h3>
                            <p></p>
                        </li>
                        <li>
                            <div class="figure_img10">
                                <img src="../img/2fd26bb99b723337a2f8eaba84f7d5bb.webp" alt="">
                            </div>
                            <h3>小米10 8K手机拍大片</h3>
                            <p></p>
                        </li>
                        
                    </ul> 
                    
                </div>
            </div>
        </div>
    </div>



    <div class="footer"></div>
    <div class="aside"></div>

</body>

</html>
<script src="../js/jquery.js"></script>
<script>

    $(".header").load("../html/header.html")
    $(".footer").load("../html/footer.html")
    $(".aside").load("../html/aside.html")


    // 导航栏划过显示
    $(".J_categoryList>li").on('mouseenter', function () {
        $(this).css('background-color', '#ff6700').siblings().css('background-color', '')
        $(this).children('.clearfix').show()
    })
    $(".J_categoryList>li").on('mouseleave', function () {
        $(this).css('background-color', '')
        $(this).children('.clearfix').hide()
    })

    // 轮播图效果banner_right

    // let Screen = document.querySelector(".banner_right");
    // // 放图片的LI
    // let Lis = document.querySelectorAll(".banner_move>li");
    // let oLeft = document.querySelector("#left");
    // let oRight = document.querySelector("#right");
    // let oBannerMove = document.querySelector(".banner_move")
    // // 放小圆点的li
    // let Li = document.querySelectorAll(".all>li")

    // class Banner {
    //     constructor(Screen, Lis, oLeft, oRight, oBannerMove, Li) {
    //         this.Screen = Screen;
    //         this.Lis = Lis;
    //         this.oLeft = oLeft;
    //         this.oRight = oRight;
    //         this.oBannerMove = oBannerMove;
    //         this.Li = Li;

    //         this.index = 0
    //         this.count = oBannerMove.children.lenght;
    //         this.oBannerMove.style.left = oBannerMove.offsetWidth * this.index + "px";
    //         this.Lis[this.index].style.backgroundColor = "white";
    //         this.eventBind();
    //         this.autoPlay()
    //     }
    //     setImg() {
    //         this.oBannerMove.style.left = oBannerMove.offsetWidth * this.index + "px";
    //     }

    //     setYuan() {
    //         for (let i = 0; i < this.Lis.length; i++) {
    //             if (i == this.index) {
    //                 this.Lis[i].style.backgroundColor = "white"
    //             } else {
    //                 this.Lis[i].style.backgroundColor = "grey";
    //             }
    //         }
    //     }
    //     Next() {
    //         this.index++;
    //         if (this.index == this.Lis.length) {
    //             this.index = 0;
    //         }
    //         this.setImg();
    //         this.setYuan();
    //     }
    //     Prev() {
    //         this.index--;
    //         if (this.index == -1) {
    //             this.index = this.Lis.length - 1;
    //         }
    //         this.setImg();
    //         this.setYuan();
    //     }
    //     // 点击小圆点
    //     clickoLi() {
    //         let that = this;
    //         for (let i = 0; i < this.Li.length; i++) {
    //             this.Li[i].onclick = function () {
    //                 that.index = i
    //                 that.setImg();
    //                 that.setYuan();
    //             }
    //         }
    //     }
    //     MouseoverRight() {
    //         this.oRight.style.background = "grey";
    //     }
    //     MouseoutRight() {
    //         this.oRight.style.background = "";
    //     }

    //     MouseoverLeft() {
    //         this.oLeft.style.background = "grey";
    //     }
    //     MouseoutLeft() {
    //         this.oLeft.style.background = "";
    //     }


    //     eventBind() {
    //         let that = this;
    //         this.oRight.addEventListener('click', function () {
    //             that.Next()
    //         })
    //         // this.oRight.onclick = function () {
    //         //     that.Next()
    //         // }
    //         this.oLeft.onclick = function () {
    //             that.Prev()

    //         }
    //         this.clickoLi()

    //         this.oRight.addEventListener('mouseover', function () {
    //             that.MouseoverRight()
    //         }, this.oRight.addEventListener('mouseout', function () {
    //             that.MouseoutRight()
    //         }))

    //         this.oLeft.addEventListener('mouseover', function () {
    //             that.MouseoverLeft()
    //         }, this.oLeft.addEventListener('mouseout', function () {
    //             that.MouseoutLeft()
    //         }))


    //     }

    // 自动播放
    // autoPlay() {
    //     var that = this;
    //     let timer = setInterval(() => {
    //         if (that.index < that.Lis.length) {
    //             that.index++;
    //         }
    //         if (that.index == that.Lis.length) {
    //             that.index = 0
    //         }
    //         that.setYuan()
    //         that.setImg()
    //     }, 2000)

    //     this.Screen.onmouseover = function () {
    //         clearInterval(timer);
    //     }
    //     this.Screen.onmouseout = function () {
    //         that.autoPlay()
    //     }
    // }

    // }

    // let a = new Banner(Screen, Lis, oLeft, oRight, oBannerMove, Li)

    let index = 0;
    let timer = 0;
    $("#arr>.left").hover(function () {
        $("#arr>.left").css("background", "rgba(0, 0, 0, .4)").show(1000);
        clearInterval(timer)
    }, function () {
        $("#arr>.left").css("background", "")
        autoplay()
    })


    $("#arr>.right").hover(function () {
        $("#arr>.right").css("background", "rgba(0, 0, 0, .4)").show(1000);
        clearInterval(timer)
    }, function () {
        $("#arr>.right").css("background", "")
    })


    $("#arr .right").on("click", function () {
        if (index == 4) {
            index = 0;
            $(".banner_move").css("left", 0)
        }
        index++;
        $(".banner_move").stop().animate({
            left: -$(".banner_right").width() * index + "px"
        }, 1000)

        if (index == 4) {
            $(".all>li").eq(0).addClass("current").siblings("li").removeClass("current")
        } else {
            $(".all>li").eq(index).addClass("current").siblings("li").removeClass("current")
        }
    })


    console.log($("#arr>.right"));
    autoplay()
    function autoplay() {
        timer = setInterval(function () {
            $(".right").triggerHandler("click")
        }, 3000)
    }



    $("#arr .left").on("click", function () {
        if (index == 0) {
            index = 4;
            $(".banner_move").css("left", "-3968px")
        }

        index--;
        $(".banner_move").stop().animate({
            left: -$(".banner_right").width() * index + "px"
        }, 1000)
        if (index == 4) {
            $(".all li").eq(0).addClass("current").siblings(".all li").removeClass("current")
        } else {
            $(".all li").eq(index).addClass("current").siblings(".all li").removeClass("current")
        }
    })

    $(".banner_right").mouseover(function () {
        clearInterval(timer)
    })

    $(".banner_right").mouseout(function () {
        autoplay()
    })
    
// let oHomeMain=document.querySelectorAll(".home_main>li");
// console.log(oHomeMain);


// 滑过所有的轮播图下面的小盒子让其 加阴影  上浮 小手效果
$(".home_main").find("li").mouseenter(function() {
    $(this).addClass("card").siblings().removeClass("card")
    $(this).css("cursor","pointer")
})
// console.log($(".home_main").find("li"));
$(".home_main").find("li").mouseleave(function() {
    $(this).removeClass("card")
})

$("#tab_list>li").mouseenter(function(){
    $("#tab_list>li").removeClass("card")
    $(this).css("color","#ff6700").siblings().css("color","")
    $(this).css("border-bottom","2px solid #ff6700").siblings().css("border-bottom","")
})
$("#tab_list>li").mouseout(function(){
    $(this).css("color","")
    $(this).css("border-bottom","")
})

  
getGoodsList1()
function getGoodsList1() {
        $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "001" }, function (data) {

            let htmlStr1 = "";
            for (let i = 0; i < data.length; i++) {
                htmlStr1 += ` <li>
                                    <a href="#">
                                        <img src="${data[i].goodsImg}">
                                        <span>${data[i].goodsName}</span>
                                    </a>
                            </li>`
            }

            $(".clearfix_ul1").html(htmlStr1)
        }, "json");
    }


    
    function getGoodsList2() {
        $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "002" }, function (data) {

            let htmlStr2 = "";
            for (let i = 0; i < data.length; i++) {
                htmlStr2 += ` <li>
                                    <a href="#">
                                        <img src="${data[i].goodsImg}">
                                        <span>${data[i].goodsName}</span>
                                    </a>
                              </li>`
            }

            $(".clearfix_ul2").html(htmlStr2);
        }, "json");
    }

    getGoodsList2()



    function getGoodsList3() {
        $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "003" }, function (data) {

            let htmlStr3 = "";
            for (let i = 0; i < data.length; i++) {
                htmlStr3 += ` <li>
                                    <a href="#">
                                        <img src="${data[i].goodsImg}">
                                        <span>${data[i].goodsName}</span>
                                    </a>
                              </li>`
            }

            $(".clearfix_ul3").html(htmlStr3);
        }, "json");
    }

    getGoodsList3()



    function getGoodsList4() {
        $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "004" }, function (data) {

            let htmlStr4 = "";
            for (let i = 0; i < data.length; i++) {
                htmlStr4 += ` <li>
                                    <a href="#">
                                        <img src="${data[i].goodsImg}">
                                        <span>${data[i].goodsName}</span>
                                    </a>
                              </li>`
            }

            $(".clearfix_ul4").html(htmlStr4);
        }, "json");
    }
    getGoodsList4()



    function getGoodsList5() {
        $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "005" }, function (data) {

            let htmlStr5 = "";
            for (let i = 0; i < data.length; i++) {
                htmlStr5 += ` <li>
                                    <a href="#">
                                        <img src="${data[i].goodsImg}">
                                        <span>${data[i].goodsName}</span>
                                    </a>
                              </li>`
            }

            $(".clearfix_ul5").html(htmlStr5);
        }, "json");
    }
    getGoodsList5()


    function getGoodsList6() {
        $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "006" }, function (data) {

            let htmlStr6 = "";
            for (let i = 0; i < data.length; i++) {
                htmlStr6 += ` <li>
                                    <a href="#">
                                        <img src="${data[i].goodsImg}">
                                        <span>${data[i].goodsName}</span>
                                    </a>
                              </li>`
            }

            $(".clearfix_ul6").html(htmlStr6);
        }, "json");
    }
    getGoodsList6()


    function getGoodsList7() {
        $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "007" }, function (data) {

            let htmlStr7 = "";
            for (let i = 0; i < data.length; i++) {
                htmlStr7 += ` <li>
                                    <a href="#">
                                        <img src="${data[i].goodsImg}">
                                        <span>${data[i].goodsName}</span>
                                    </a>
                              </li>`
            }

            $(".clearfix_ul7").html(htmlStr7);
        }, "json");
    }
    getGoodsList7()


    function getGoodsList8() {
        $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "008" }, function (data) {

            let htmlStr8 = "";
            for (let i = 0; i < data.length; i++) {
                htmlStr8 += ` <li>
                                    <a href="#">
                                        <img src="${data[i].goodsImg}">
                                        <span>${data[i].goodsName}</span>
                                    </a>
                              </li>`
            }

            $(".clearfix_ul8").html(htmlStr8);
        }, "json");
    }
    getGoodsList8()


    function getGoodsList9() {
        $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "009" }, function (data) {

            let htmlStr9 = "";
            for (let i = 0; i < data.length; i++) {
                htmlStr9 += ` <li>
                                    <a href="#">
                                        <img src="${data[i].goodsImg}">
                                        <span>${data[i].goodsName}</span>
                                    </a>
                              </li>`
            }

            $(".clearfix_ul9").html(htmlStr9);
        }, "json");
    }
    getGoodsList9()


    function getGoodsList10() {
        $.get("../goodsAndShoppingCart/getGoodsList.php", { "typeId": "010" }, function (data) {

            let htmlStr10 = "";
            for (let i = 0; i < data.length; i++) {
                htmlStr10 += ` <li>
                                    <a href="#">
                                        <img src="${data[i].goodsImg}">
                                        <span>${data[i].goodsName}</span>
                                    </a>
                              </li>`
            }

            $(".clearfix_ul10").html(htmlStr10);
        }, "json");
    }
    getGoodsList10()




    // 轮播图
    // $(function () {
    //     getBanner();
    // })

    function getBanner() {
        $.get("../goodsAndShoppingCart/bannerGet.php", function (data) {
            console.log(data);
            let htmlStr = "";
            for (let i = 0; i < data.length; i++) {
                console.log(data[i]);
                htmlStr += ` <li>
                                    <a href="#">
                                        <img src='${data[i].img}' alt="">
                                    </a>
                            </li>`
            }

            console.log(htmlStr);

            $(".banner_move").html(htmlStr);
        }, "json");
    }

    getBanner()
</script>




<!-- <script src="../img/lunbo1.jpg"></script> -->